<#macro main>
<!DOCTYPE html>
<html>
<head>
<title>工作台</title>
<meta name="content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="/css/reset.css">
<link rel="stylesheet" type="text/css" href="/source/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/layout.css">

<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/source/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/radialIndicator.js"></script>

<script type="text/javascript">
	$(function() {
		//圆形进度条
		$('.indicatorContainer').radialIndicator(
			{
				barColor : 'rgb(232, 177, 16)',
				barWidth : 13,
				initValue : 46,
				roundCorner : true,
				percentage : true
			});

		//四格旋转效果
		$(".cell").hover(function() {
			$(this).find(".content").find("i").css(
				{
					'transition' : 'rotate(83deg)',
					'-webkit-transform' : 'rotate(83deg)',
					'-moz-transform' : 'rotate(83deg)',
					'-o-transform' : 'rotate(83deg)',
					'-ms-transform' : 'rotate(83deg)',
					'font-size' : '150px'
				});
		}, function() {
			$(this).find(".content").find("i").css(
				{
					'transition' : 'rotate(0deg)',
					'-webkit-transform' : 'rotate(0deg)',
					'-moz-transform' : 'rotate(0deg)',
					'-o-transform' : 'rotate(0deg)',
					'-ms-transform' : 'rotate(0deg)',
					'font-size' : '60px'
				});
		});

		$(".nav-sidebar li:not('.has-child')").click(function() {
			$(".nav-sidebar li").removeClass("active");
			$(this).addClass("active");
			$(this).parent("ul").parent("li").addClass("active");
		});

		$(".nav-sidebar > li.has-child > a").click(function() {
			$(this).toggleClass("down");
			$(this).parent("li").children("ul").slideToggle();
		});
	})
</script>
</head>

<body>
	<!-- 顶端导航条 -->
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<div class="navbar-brand" href="javascript:void(0);">
					<img src="/source/index_logo.jpg" alt="">
				</div>
				<a class="navbar-brand " href="javascript:void(0);">工作台</a>
				<div class="navbar-brand navbar-brand-last" href="javascript:void(0);">
					<span>北京市出入境检验检疫局</span><span class="font13">项目管理系统</span>
				</div>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li class="bell"><a href="javascript:void(0);">
							<i class="glyphicon glyphicon-bell"></i><span>15</span>
						</a></li>
					<li class="user"><a href="javascript:void(0);">
							<img src="/source/user_icon.jpg">张三<span class="triangle-down"></span>
						</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<input type="text" class="form-control" placeholder="请输入要搜索的内容">
					<i class="glyphicon glyphicon-search"></i>
				</form>
			</div>
		</div>
	</nav>

	<!-- 左侧导航栏 -->
	<div class="sidebar ">
		<ul class="nav nav-sidebar">
			<li class="active"><a href="javascript:void(0);">
					<i class="glyphicon glyphicon-inbox"></i>需求池管理
				</a></li>
			<li><a href="javascript:void(0);">
					<i class="glyphicon glyphicon-file"></i>项目信息管理
				</a></li>
			<li class="has-child"><a href="javascript:void(0);">
					<i class="glyphicon glyphicon-edit"></i> <span>立项与招标</span>
				</a>
				<ul class="sec-menu">
					<li>项目申报管理</li>
					<li>专家评审管理</li>
					<li>立项管理</li>
				</ul></li>
			<li class="has-child"><a href="javascript:void(0);">
					<i class="glyphicon glyphicon-folder-close"></i><span>开发与验收</span>
				</a>
				<ul class="sec-menu">
					<li>项目申报管理</li>
					<li>专家评审管理</li>
					<li>立项管理</li>
				</ul></li>
			</li>
			<li class="has-child"><a href="javascript:void(0);">
					<i class="glyphicon glyphicon-folder-close"></i>维护
				</a>
				<ul class="sec-menu">
					<li>项目申报管理</li>
					<li>专家评审管理</li>
					<li>立项管理</li>
				</ul></li>
			</li>
			<li class="has-child"><a href="javascript:void(0);">
					<i class="glyphicon glyphicon-folder-close"></i>查询统计
				</a>
				<ul class="sec-menu">
					<li>项目申报管理</li>
					<li>专家评审管理</li>
					<li>立项管理</li>
				</ul></li>
			</li>
			<li><a href="javascript:void(0);">
					<i class="glyphicon glyphicon-folder-close"></i>通知管理
				</a></li>
			<li><a href="javascript:void(0);">
					<i class="glyphicon glyphicon-folder-close"></i>代办管理
				</a></li>
			<li><a href="javascript:void(0);">
					<i class="glyphicon glyphicon-folder-close"></i>个人管理
				</a></li>
		</ul>
	</div>

	<!-- 右侧主体 -->
	<div class="main">
		<#nested>
		<div class="footer">北京出入境检验检疫局版权所有 技术支持：北京中科院软件中心有限公司</div>
	</div>

</body>
</html>
</#macro>